<template>
    <div class="nav-header">
        <div class="left">
            <navigation />
        </div>
        <div class="right">
            <div
                class="command-center"
                @click="goHome"
                :style="{
                    border: `1px solid ${store.theme.anotherColor}`,
                    color: store.theme.anotherColor,
                    backgroundColor: store.theme.bgColor
                }"
            >
                首页
            </div>
            <div class="user" @click="loginOut" @mouseenter="userMouseEnter" @mouseleave="userMouseLeave">
                <img src="@/assets/image/home/user.png" />
                <span :style="{ color: store.theme.formFontColor }">{{ store.userInfo.loginName || "" }}</span>
            </div>
        </div>
        <transition>
            <div class="user-box" v-show="isShow">
                <div class="user-info">
                    <img src="@/assets/image/home/user.png" />
                    <div class="user-info-right">
                        <span class="account">{{ store.userInfo.loginName || "" }}</span>
                        <span class="name">{{ store.userInfo.deptName }} {{ store.userInfo.showName || "" }}</span>
                    </div>
                </div>
                <div class="time">上次登录时间 {{ store.userInfo.lastLoginDateTime || "" }}</div>
                <div class="label">{{ store.userInfo.roles[0].name || "" }}</div>
            </div>
        </transition>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { mainStore } from "@/store/main.js";
import navigation from "@/components/navigation.vue";
import { accountOut } from "@/service/api/login.js";
import { ref } from "vue";

const isShow = ref(false);
const store = mainStore();
const router = useRouter();
const loginOut = () => {
    router.push("/login");
    accountOut()
        .then((res) => {
            localStorage.clear();
        })
        .catch((err) => {
            localStorage.clear();
        });
};
const goHome = () => {
    router.push("/main/home");
};
const userMouseEnter = () => {
    isShow.value = true;
};
const userMouseLeave = () => {
    isShow.value = false;
};
</script>

<style lang="less" scoped>
.nav-header {
    display: flex;
    justify-content: space-between;
    height: 100%;
    color: #282828;
    .right {
        display: flex;
        align-items: center;
        font-size: 14px;
        .command-center {
            width: 91px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
        }
        .user {
            display: flex;
            align-items: center;
            margin-left: 32px;
            cursor: pointer;
            span {
                margin-left: 8px;
            }
        }
    }
    .user-box {
        position: absolute;
        top: 70px;
        right: 16px;
        z-index: 4;
        box-sizing: border-box;
        width: 300px;
        padding: 16px;
        background: #ffffff;
        .user-info {
            position: relative;
            display: flex;
            align-items: center;
            .user-info-right {
                display: flex;
                flex-direction: column;
                margin-left: 10px;
                .account {
                    font-size: 18px;
                    font-weight: 600;
                    color: #1b3646;
                }
                .name {
                    margin-top: 3px;
                    color: #595959;
                    font-size: 14px;
                }
            }
            img {
                width: 40px;
                height: 40px;
            }
        }
        .time {
            margin-top: 16px;
            font-size: 14px;
            color: #bfbfbf;
        }
        .label {
            position: absolute;
            top: 21px;
            right: 18px;
            padding: 0 2px;
            height: 17px;
            font-size: 12px;
            background-color: #cce0f0;
            line-height: 17px;
            color: #0065b2;
        }
    }
    .v-enter-active,
    .v-leave-active {
        transition: opacity 2.5s ease;
    }

    .v-enter-from,
    .v-leave-to {
        opacity: 0;
    }
}
</style>
